<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true" label-width="80px">
      <el-form-item label="商品类型" prop="commodityType">
        <el-cascader ref="commodityType" :options="options" v-model="commodityType" :props="props"
          clearable></el-cascader>
      </el-form-item>
      <el-form-item label="商品编号" prop="commodityNo">
        <el-input v-model="queryParams.commodityNo" placeholder="请输入商品编号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="商品名称" prop="commodityName">
        <el-input v-model="queryParams.commodityName" placeholder="请输入商品名称" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button v-hasPermi="['cld:projectRepository:export']" icon="el-icon-download" plain size="mini" type="primary"
                   @click="handleExport(form.wareId,form.projectName+'物资明细')">导出物资明细
        </el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="materialDetailsList" border>
      <el-table-column label="商品类别" align="center" prop="commodityTypeName" />
      <el-table-column label="商品编号" align="center" prop="commodityNo" />
      <el-table-column label="商品名称" align="center" prop="commodityName" />
      <el-table-column label="单位" align="center" prop="unitName" />
      <el-table-column label="规格" align="center" prop="commoditySpec" />
      <el-table-column label="单价" align="center" prop="costPrice">
        <template slot-scope="scope">
          <span>{{ toMoney(!scope.row.costPrice ? 0 : scope.row.costPrice) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="库存总量" align="center" prop="totalInventory" />
      <el-table-column label="员工存量" align="center" prop="staffStock" >
        <template slot-scope="scope">
          <div v-if="scope.row.staffStock > 0">
            <el-link type="primary" @click="handleViewStaffStock(scope.row)">{{scope.row.staffStock}}</el-link>
          </div>
          <div v-else>{{scope.row.staffStock}}</div>
        </template>
      </el-table-column>
      <el-table-column label="库存总额" align="center" prop="totalAmount">
        <template slot-scope="scope">
          <span>{{ toMoney(!scope.row.totalAmount ? 0 : scope.row.totalAmount) }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

     <!-- 员工库存 -->
     <el-dialog :title="detailsTitle" :visible.sync="detailsOpen" width="600px" append-to-body>
      <el-row :gutter="10">
        <el-col :span="6" v-for="item in detailsList" :key="item.staffName">
          <el-card class="box-card" >
        {{item.staffName}} * {{item.stockNumber}}
      </el-card>
        </el-col>
      </el-row>

     </el-dialog>
  </div>
</template>

<script>
import { listMaterialDetails,selectStaffStockList } from "@/api/cld/projectRepository";
import { listErpCommodityType } from "@/api/erp/ErpCommodityType";

export default {
  name: "projectRepository",
  props: {
    form: {
      type: Object
    }
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 项目仓库表格数据
      materialDetailsList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        wareId: this.form.wareId,
        commodityType: null,
        commodityNo: null,
        commodityName: null
      },
      // 下拉商品类型
      options: [],
      props: {
        multiple: true,
        checkStrictly: true,
        value: "commodityTypeId",
        label: "commodityTypeName",
      },
      commodityType: [],
      // 员工库存
      detailsOpen: false,
      detailsTitle: '',
      detailsList: []
    };
  },
  created() {
    this.getList();
    this.getListCommodityType();
  },
  methods: {
    /** 查询物资明细 */
    getList() {
      this.loading = true;
      listMaterialDetails(this.queryParams).then(response => {
        this.materialDetailsList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 获取商品类别 */
    getListCommodityType() {
      listErpCommodityType().then((response) => {
        this.options = this.handleTree(
          response.data,
          "commodityTypeId",
          "commodityTypePid"
        );
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      let nodes = this.$refs.commodityType.getCheckedNodes();
      if (nodes.length > 0 && this.commodityType.length > 0) {
        let nodeIds = nodes.map((item) => item.value);
        this.queryParams.commodityType = nodeIds.join("|");
      }
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.commodityType = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 查看员工存量
    handleViewStaffStock(row){
      this.detailsTitle = row.commodityName + '-员工存量'
      selectStaffStockList({wareId: row.wareId, commodityId: row.commodityId}).then( res => {
        this.detailsList = res.data;
        this.detailsOpen = true;
      })
    },
    //项目仓库物资明细列表导出
    handleExport(id,fileName) {
      this.download('cld/projectRepository/exportProjectRepositoryList', {wareId: id}, `${fileName}.xlsx`)
    }
    // 返回
    // handleReturn() {
    //   const obj = { path: "/cloudManage/supplies/projectRepository", name: "projectRepository" };
    //   this.$tab.closeOpenPage(obj);
    //   this.$tab.refreshPage(obj);
    // }
  }
};
</script>
<style scoped>
.el-select {
  width: 100%;
}

.title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: left;
  color: black;
}
</style>
